
import 'package:flutter/material.dart';
import 'dart:math' as math;

class TransformPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Transform"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            /// Transform.translate接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离。
            DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red
              ),
              child: Transform.translate(
                offset: Offset(20, -5),
                child: Text("Transform Translate"),
              ),
            ),
            Spacer(
              flex: 1
            ),
            DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.red
              ),
              child: Transform.rotate(
                angle: math.pi / 2,
                child: Text("Transform Rotate"),
              ),
            ),
            Spacer(
              flex: 1
            ),
            DecoratedBox(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Transform.scale(
                scale: 1.5,
                child: Text("Transform Scale"),
              ),
            ),
            Spacer(
              flex: 1,
            ),
            Row(
              /// Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，
              /// 所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，
              /// 因为这些是在布局阶段就确定的
              /// 所以下面两个文本会重叠
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.green
                  ),
                  child: Transform.scale(
                    scale: 1.5,
                    child: Text("Transform Scale"),
                  ),
                ),
                Text(
                  "你好",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18
                  ), 
                )
              ],
            ),
            Spacer(
              flex: 1,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.red
                  ),
                  /// RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，
                  /// 但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。
                  child: RotatedBox(
                    quarterTurns: 1,
                    child: Text("Rotated Box"),
                  ),
                ),
                Text(
                  "你好",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 18
                  ), 
                )
              ],
            )
          ],
        ),
      )
    );
  }
}